<template>
  <header class="header">
    <div class="headerBoxLeft" @click="goHome">
      <img class="img" src="../../assets/image/logo.png" alt="" />
    </div>
    <div class="headerBoxCenter">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#1c1b1b"
        text-color="#ffffff"
        active-text-color="#ffd04b"
        :default-active="selectMen"
      >
        <template v-for="(item, index) in navgation" :key="index">
          <template v-if="!item.children">
            <el-menu-item @click="menuClickFn(item)" :index="`${index}`">
              <div>
                {{ $t(`${item.title}`) }}
              </div>
            </el-menu-item>
          </template>

          <template v-else>
            <el-sub-menu :index="index">
              <template #title>{{ $t(`${item.title}`) }}</template>
              <el-menu-item
                @click="menuClickFn(item2)"
                v-for="(item2, index2) in item.children"
                :key="`${index2}-${index}`"
                :index="`${index2}-${index}`"
                >{{ $t(`${item2.title}`) }}</el-menu-item
              >
            </el-sub-menu>
          </template>
        </template>
      </el-menu>
    </div>

    <!-- <div class="headerBoxCenterInpute aliCenter">
      <div style="height: 40px">
        <el-input
          v-model="searchData"
          style="width: 240px"
          size="large"
          placeholder="Search for a product"
          :suffix-icon="Search"
        />
      </div>
    </div> -->
    <div class="headerBoxRigth aliCenter">
      <!-- <el-dropdown>
        <span class="el-dropdown-link"> {{ selectLange }} </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="selectLangFn('en', 'English')">English</el-dropdown-item>
            <el-dropdown-item @click="selectLangFn('zh', '中文')">中文</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown> -->
    </div>
  </header>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n"
import { useCounterStore } from '@/stores/counter.js'
import { ref, reactive, toRaw, onMounted, onUpdated, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Microphone, Mute } from '@element-plus/icons-vue'
// let MutePinia = ref(false)
const router = useRouter()
const route = useRoute()
let { locale } = useI18n()
let searchData = ref('')
let selectLange = ref('English')
let selectMen = ref(0)
// let MutePinia = useCounterStore()
const MuteFn = (data) => {
  MutePinia.MuteFn(data)
}
let navgation = ref([
  {
    title: 'messages.header.header7',
    path: '/'
  },

  {
    title: 'messages.header.header1',
    path: '/product',
    children: [
      {
        title: 'messages.header.header9',
        path: '/product/paint-protection-film-PPF'
      }, {
        title: 'messages.header.header10',
        path: '/product/color-paint-protection-film-PPF'
      }, {
        title: 'messages.header.header11',
        path: '/product/window-film'
      }, {
        title: 'messages.header.header12',
        path: '/product/sunroof-film'
      }

    ]
  }, {
    title: 'messages.header.header2',
    path: '/store'
  }, {
    title: 'messages.header.header3',
    path: '/companyProfile'
  }, {
    title: 'messages.header.header5',
    path: '/news'
  }, {
    title: 'messages.header.header4',
    path: '/contactUs'
  },
  {
    title: 'messages.header.header8',
    path: '/WarrantySerach',
  },
  {
    title: 'messages.header.header6',
    path: '/my',
    path2: '/storeMy'
  }
])
const menuClickFn = (item) => {
  if (item.path == '/my') {
    if (localStorage.getItem('userInfo') || localStorage.getItem('storeInfo')) {
      if (localStorage.getItem('userInfo')) {
        router.push(item.path)
      } else {
        router.push(item.path2)
      }
    } else {
      router.push('/login')
    }
  } else {
    router.push(item.path)
  }
}
watch(
  () => route,
  (newRoute, oldRoute) => {
    // 在这里可以执行路由变化时需要做的任何逻辑
    navgation.value.forEach((item, index) => {
      if (item.path == newRoute.path || item.path2 == newRoute.path) {
        selectMen.value = `${index}`
      }
    })
  },
  { deep: true, immediate: true }
)

const selectLangFn = (data, text) => {
  selectLange.value = text
  locale.value = data
}
const goHome = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.header {
  height: 10vh;
  background: #1c1b1b;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 15px;
  .headerBoxLeft {
    cursor: pointer;
    .img {
      height: 55px;
      width: 262px;
    }
  }
  .headerBoxCenter {
    width: 1050px;
    ::v-deep .el-popper {
      border: 0;
    }
    .el-menu-item {
      font-size: 16px;
      font-weight: bold;
      color: white;
    }
    ::v-deep .el-sub-menu__title {
      font-size: 16px;
      font-weight: bold;
      color: white;
    }
    ::v-deep .el-sub-menu__icon-arrow {
      font-size: 16px;
      font-weight: bold;
      color: white;
    }
    .el-menu--horizontal {
      border-bottom: 0;
    }
  }
  .headerBoxRigth {
    width: 120px;
    .el-dropdown-link {
      font-size: 16px;
      font-weight: bold;
      color: white;
    }
  }
  ::v-deep .el-input__wrapper {
    background-color: #323232 !important;
    border: 0;
    box-shadow: 0 0 !important;
  }
}
.Mute {
  cursor: pointer;
}
.el-menu-item {
  font-size: 16px;
  font-weight: bold;
  color: white;
}
</style>